<template>
    <el-form :model="personRecForm" label-width="auto" class="problem-form">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="通知书状态:">
                    {{ personRecForm.noticeStatus }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="整改回复人:">
                    {{ personRecForm.replyBy }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="问题责任人:">
                    {{ personRecForm.responsibleBy }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="整改情况:">
                    {{ personRecForm.correction }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="整改附件:">
                    {{personRecForm.files?.map((file) => file.name).join(',')}}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="处理意见:">
                    {{ personRecForm.handleOpinion }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="违规标准:">
                    {{ personRecForm.violationStandard }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="处理方式:">
                    {{ personRecForm.handleType }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="回复时间:">
                    {{ personRecForm.replyTime }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="回复状态:">
                    {{ personRecForm.replyStatus }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="退回记录:">
                    {{ personRecForm.returnRecord }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="系统标签:">
                    {{ personRecForm.systemTag }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="验收人:">
                    {{ personRecForm.acceptanceBy }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="验收意见:">
                    {{ personRecForm.acceptanceOpinion }}
                </el-form-item>
            </el-col>
            <el-col :span="12">

                <el-form-item label="验收评价:">
                    {{ personRecForm.acceptanceEvaluate }}
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { getDetail } from '@/api/index.ts';
interface ProblemFormType {
    noticeStatus?: string,
    replyBy?: string,
    responsibleBy?: string,
    correction?: string,
    files?: Array<any>,
    handleOpinion?: string,
    violationStandard?: string,
    handleType?: string,
    replyTime?: string,
    replyStatus?: string,
    returnRecord?: string,
    systemTag?: string,
    acceptanceBy?: string,
    acceptanceOpinion?: string,
    acceptanceEvaluate?: string,
}
const personRecForm = reactive<ProblemFormType>({
    noticeStatus: '已阅',
    replyBy: '张三',
    responsibleBy: '李四',
    correction: '整改完了',
    files: [
        { name: '文件1', url: 'http://www.baidu.com' },
        { name: '文件2', url: 'http://www.baidu.com' }
    ],
    handleOpinion: '没意见',
    violationStandard: '没标准',
    handleType: '不做处理',
    replyTime: '2023-01-01',
    replyStatus: '已回复',
    returnRecord: '暂无',
    systemTag: '暂无',
    acceptanceBy: '王五',
    acceptanceOpinion: '验收',
    acceptanceEvaluate: '五星',
})

// 主键
const id = ref<string>('');
const route = useRoute();

onMounted(() => {

    id.value = route.query.id as string

    // 实际数据请求
    if (id.value) {
        // getDetail(id.value).then(res=>{
        //     personRecForm = Object.assign(personRecForm, res.data)
        // })
    }
})

</script>

<style scoped lang="scss">
.problem-form {
    padding: 30px 0;
    width: 70%;
    margin: 0 auto;
}

:deep(.el-form-item__content) {
    font-size: 26px;
    color: #fff;
}

:deep(.el-form-item__label) {
    font-size: 24px;
}
</style>